<!doctype html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>月经分析</title>
        <script src="js/common/echarts.js"></script> 
        <script type="text/javascript" src="js/common/dateUtil.js"></script>
        <script type="text/javascript" src="js/common/mapUtil.js"></script>
        <script type="text/javascript" src="js/common/string2Map.js"></script>
        
        <script type="text/javascript" src="js/common/periodUtil.js"></script>
        <script type="text/javascript" src="js/menses/initMensesChartData.js"></script>
        <script type="text/javascript" src="js/menses/drawMensesChart.js"></script>
        <script type="text/javascript" src="js/menses/mensesDetail.js"></script>
        <script type="text/javascript" src="js/common/detailUtil.js"></script>
        <link href="css/scroll.css" rel="stylesheet" type="text/css">
    </head>

<body style="margin:0px;padding:0px; font-family:'微软雅黑'" bgcolor="#F0F0F0">
	<div id="div_fix_zone">
		<div id="div_scroll_zone"> 
			<div id="mensesChart"></div> 
		</div>
	</div>
	
    <table id="detail_table" style="display:none; text-align:center; margin-left:auto; margin-right:auto;font-family:'微软雅黑'">
  	<tr style="width:100%">
    	<td id="periodDayNum_td">
        	<div id="periodDayNum_div" style="color:#666461">
            	周期第<span id="periodDayNum" style="color:#fe8c8c"> </span>天
            </div>
        </td>
        <td id="detail_td" style="background-color:#fe8c8c">
        	<div id="detail_div">
                <div id="detail_div2">
                    <img id="heart" alt="heart" src="img/detailCircle/heart.png"/>
                    <img id="moon" alt="moon" src="img/detailCircle/moon.png"/>
                    <img id="drink" alt="drink" src="img/detailCircle/drink.png"/>
                    <img id="medicine" alt="medicine" src="img/detailCircle/medicine.png"/>
                    <img id="plane" alt="plane" src="img/detailCircle/plane.png"/>
                </div>
                <div id="detailMenses" style="margin:2.5%;font-size:110%;color:#FFF"> </div>
                <div id="detailDate" style="font-size:110%;color:#666461"> </div>
                <div id="detailDayOfWeek" style="color:#666461"> </div>
            </div>
        </td>
        <td id="periodDayTitle_td">
        	<div id="periodDayTitle_div">
        		<img alt="periodDayTitle" id="periodDayTitle" src="img/period/yjq.png" style=" width:90%"/>
            </div>
        </td>
    </tr>
  </table>
</body>
</html>
<script type="text/javascript">

  var customerDatePeriodMap = new Map(); 
  var customerDateHeartMap  = new Map();
  var customerDateMoonMap  = new Map();
  var customerDateMedicineMap = new Map();
  var customerDateDrinkMap = new Map();
  var customerDatePlaneMap = new Map();
  var customerDateTemperatureMap = new Map();
  var customerDataMensesStartDateArray = new Array();
  var customerDataMensesStartDateArrayLen;
  var customerDataMensesEndDateArray = new Array();
  
  setTimeout('firstShowMensesChart()', 200);
  
  function firstShowMensesChart(){
  	initCustomerData();
  	
  	//只有2个以上的经期才能画图
  	if(customerDataMensesStartDateArrayLen >= 2){
	  	initMensesChartData();
	  	
	    setEChartConfig();
		drawMensesChart();
		
		firstShowMensesChartDetail();
	}
  }

  function initCustomerData(){
      var customerDatePeriodStr = localStorage.getItem("customerDatePeriodKey");
	  var customerDateHeartStr = localStorage.getItem("customerDateHeartKey");
	  var customerDateMoonStr = localStorage.getItem("customerDateMoonKey");
	  var customerDateMedicineStr = localStorage.getItem("customerDateMedicineKey");
	  var customerDateDrinkStr = localStorage.getItem("customerDateDrinkKey");
	  var customerDatePlaneStr = localStorage.getItem("customerDatePlaneKey");
      var customerDateMensesStr = localStorage.getItem("customerDateMensesKey");
      var customerDateTemperatureStr = localStorage.getItem("customerDateTemperatureKey");
    
      customerDatePeriodMap = getDatePeriodMap(customerDatePeriodStr);
	  customerDateHeartMap = getDateHeartMap(customerDateHeartStr);
	  customerDateMoonMap = getDateMoonMap(customerDateMoonStr);
	  customerDateMedicineMap = getDateMedicineMap(customerDateMedicineStr);
	  customerDateDrinkMap = getDateDrinkMap(customerDateDrinkStr);
	  customerDatePlaneMap = getDatePlaneMap(customerDatePlaneStr);
      customerDateTemperatureMap = getDateTemperatureMap(customerDateTemperatureStr);
	  
	  initMensesStartDateArray();
      initMensesEndDateArray();  
  }   
  
  function initMensesStartDateArray(){
  	  var customerDataMensesStartDateArrayStr = localStorage.getItem("customerDataMensesStartDateArrayStrKey");
  	  customerDataMensesStartDateArray = customerDataMensesStartDateArrayStr.split(",");
      customerDataMensesStartDateArrayLen = customerDataMensesStartDateArray.length;
  }

  function initMensesEndDateArray() {
      var customerDataMensesEndDateArrayStr = localStorage.getItem("customerDataMensesEndDateArrayStrKey");
  	  customerDataMensesEndDateArray = customerDataMensesEndDateArrayStr.split(",");
  }
	
    </script>  